<!doctype html>
<html>
 <head> 
  <meta charset="utf-8"> 
  <title>hxNav 无限垂直导航栏 hxNav - layui 第三方组件平台</title> 
  <meta name="renderer" content="webkit"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
  <meta name="description" content="在原生垂直导航的基础上，添加了异步加载模式和简单的事件处理，简单易用、异步。"> 
  <link rel="stylesheet" href="/t/font_24081_60slu02pimt.css">
  <link rel="stylesheet" href="/layui/dist/css/layui.css">
  <link rel="stylesheet" href="/static/css/fly/global.css" charset="utf-8">
  <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
  <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
 </head>
 <body>
  <div class="layui-header header header-extends" style="background-color: #24262F;"> 
   <div class="layui-container"> <a class="logo" href="/"> <img src="/static/images/layui/logo.png" alt="layui"> </a>
    <div class="layui-form component" lay-filter="LAY-site-header-component"></div> 
    <ul class="layui-nav"> 
     <li class="layui-nav-item layui-hide-xs"> <a href="/">框架</a> </li>
     <li class="layui-nav-item layui-hide-xs layui-this"> <a href="/extend/index.html">扩展</a> </li> 
     <li class="layui-nav-item"> <a href="javascript:;">周边</a> 
      <dl class="layui-nav-child layui-nav-child-c"> 
       <dd lay-unselect> <a href="/alone.html" target="_blank">独立组件</a>
       </dd> 
       <dd class="layui-hide-sm layui-show-xs" lay-unselect> <a href="/extend/index.html">扩展组件</a> 
        <hr> 
       </dd> 
      </dl> </li> 
    </ul> 
   </div>
  </div><!--[if lt IE 9]>  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script><![endif]--> 
  <div class="fly-extend-banner fly-extend-banner-sm"> 
   <div class="layui-carousel" id="FLY-extend-banner" data-height="200px"> 
    <div carousel-item> 
     <div style="background-image: url(/upload/2018_8/168_1535373858670_8825.jpg)">
      <div style="background: rgba(0,0,0,.6)"></div> 
     </div> 
    </div> 
   </div> 
   <h1 class="fly-extend-banner-title">layui 第三方组件平台</h1> 
   <div class="fly-extend-banner-release"> <a href="/extend/index.html" class="layui-btn layui-btn-lg">返回首页</a>
   </div> 
  </div>
  <div class="fly-extend-detail layui-card"> 
   <div class="layui-container"> 
    <div class="fly-extend-list-header"> 
     <h1 class="fly-extend-title layui-elip"> <a>hxNav 无限垂直导航栏</a> <span class="layui-badge layui-bg-green layui-hide-xs">hxNav</span> </h1> 
     <div class="fly-extend-list-info"> <a href="/u/51608424/index.html" target="_blank" class="fly-extend-list-user" title="发布者"> <cite class="layui-hide-xs">示申**舌</cite> <img src="/g" alt="示申**舌"> </a> 
     </div> 
    </div> 
    <blockquote class="fly-extend-list-desc layui-elem-quote"> 
     <p>在原生垂直导航的基础上，添加了异步加载模式和简单的事件处理，简单易用、异步。</p> 
    </blockquote> 
    <div class="fly-extend-list-bottom"> <span class="layui-inline">更新：2020-3-18 </span> <span class="layui-inline">创建：2020-2-6 </span> 
     <div class="layui-btn-container layui-extend-doc-edit"> 
     </div> 
    </div> 
   </div>
  </div>
  <div class="layui-container"> 
   <div class="layui-row layui-col-space20"> 
    <div class="layui-col-sm3 layui-col-md2"> 
     <div class="layui-card"> 
      <ul class="fly-extend-doc-nav" lay-filter="extend-doc-nav"> 
       <li class="layui-this" lay-id="doc"> <a href="javascript:;"><i class="iconfont icon-wendang"></i> 文档</a> </li> 
       <li lay-id="download"> <a href="javascript:;"><i class="iconfont icon-xiazai"></i> 下载</a> </li> 
      </ul> 
     </div> 
    </div> 
    <div class="layui-col-sm9 layui-col-md10"> 
     <div class="layui-card fly-extend-doc layui-show"> 
      <div class="layui-card-header"> 
       <h3 class="layui-inline layui-this">文档</h3> 
      </div> 
      <div class="layui-card-body detail-body photos layui-text">
        先上效果图：
       <img src="/upload/2020_1/51608424_1578645789818_93669.jpg"> 
       <br>
       <hr>使用方法：
       <br>一、HTML：
       <br>只需要一个div
       <br>
       <pre>&lt;div id="hxNavbar"&gt;&lt;/div&gt;</pre>二、JS
       <br>
       <pre>       layui.extend({<br>            hxNav: '../jslibs/layui/extend/hxNav'  // 根据你自己的目录设置<br>        }).use(['element','hxNav'],function(){<br>            layui.hxNav({<br>                element: '#hxNavbar',        // 必须，指定ID<br>                url: 'system/getMenuNavbar.php',  // 请求后台数据的接口<br>                type: 'post',<br>                shrink: false, <br>                onSelect: function(v) {<br>                    console.log(v);<br>                }<br>            });<br>        });</pre>
       <hr>说明：
       <br> 页面加载后，组件会自动向url指定的接口发送请求，第一次请求时不带任何参数，此时服务器应返回所有的根节点。此时组件全部的根节点都是收缩状态。
       <br> 如果用户点击了某个节点，组件会自动再次向接口请求数据，此时会携带一个参数，参数名称为ID，内容值为被点击的节点的ID。此时，服务器应返回该节点的所有孩子节点，组件收到孩子节点数据后，会自动渲染到被点击的节点下。
       <br>
       <br>参数详细说明：
       <br>
       <br>element: 字符串，必须参数，元素ID，默认空
       <br>url: 字符串，必须参数，数据接口，默认空("")
       <br>type: 字符串，请求类型，可以为post、get两种，默认post
       <br>width: 数值，宽度，默认220(px)，不需要带“px”
       <br>shrink: 布尔，指定是否自动收缩未选定的节点。默认false
       <br>background: 字符串，背景颜色，默认“#393d49”
       <br>autoExpand: 布尔，默认false。默认情况下，只有用户点击了节点的时候，才去请求并加载该节点的数据，如果该项设置为ture，则组件会立即向服务器请求所有的节点数据。
       <br>onSelect: function(node) 函数，当用户选择了某个节点时，触发该事件。node中包含了所选节点的数据。
       <br>
       <hr>另外，如果由于某些原因，需要用js选中某个节点时，比如，用户点击了之前打开过的tab标签，这时需要在导航栏中回显一下，可以使用下面的方法：
       <br>
       <pre>layui.hxNav('select', id );</pre>注意：通过这个方法选择节点时，仍然会触发组件的onSelect事件！
       <br>
       <hr>关于数据接口：
       <br>JSON格式。形如：[{ "id": "ident", "text": "title text", "icon": "icon", "hasChildren": 0，"href": "targetUrl.php", }]
       <br>解释：
       <br>id：节点的唯一标识（必须）
       <br>text：节点的文本 （必须）
       <br>hasChildren：数值型，指明这个节点是否拥有孩子节点，只需要给0或1即可。
       <br>组件必须的数据就是上述3个。另外还有一个icon，是可选的，如下：
       <br>icon：节点的图标，必须是layui-icon-xxx的类名。（如果没有图标，可以不设置该字段，或者返回空）
       <br>至于href等其他数据，根据自己的需要来设置。
       <br>
       <br>关于后台的例子：
       <br>
       <pre>&lt;?php<br><br>$pid = empty($_POST['id'] ) ? null : $_POST['id']; // 前端发来的请求，表明了现在要请求哪一个节点的孩子，请求根节点时，这个参数为空<br>$pdo = new MyPDO();  // pdo连接到mysql<br>$arrParams = array();<br>if( empty( $pid ))<br>        $whereParent = 'pi IS NULL';<br>else {<br>        $whereParent = 'pi=:pi';<br>        $arrParams[':pi'] = $pid;<br>}<br>$stm = $pdo-&gt;prepare("SELECT id,nm AS text,ic AS icon,isMenuHasChild(id) AS hasChildren,hr AS href FROM sy_menu WHERE {$whereParent} ORDER BY st");<br>$stm-&gt;execute($arrParams);<br>$result = $stm-&gt;fetchAll(PDO::FETCH_ASSOC);<br>echo json_encode( $result, JSON_UNESCAPED_UNICODE );</pre>上面例子中，关于sql语句中的isMenuHasChild,是一个自己写的mysql函数，原理如下：
       <br>
       <pre>-- menu表结构：<br>DROP TABLE IF EXISTS `sy_menu`;<br>CREATE TABLE sy_menu(<br>    `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'id',<br>    `pi` int(11) DEFAULT NULL COMMENT 'parent id',<br>    `st` int(11) NOT NULL DEFAULT 0 COMMENT 'sort',<br>    `nm` varchar(128) DEFAULT NULL COMMENT 'name',<br>    `ic` varchar(64) DEFAULT NULL COMMENT 'icon',<br>    `hr` varchar(256) DEFAULT NULL COMMENT 'href',<br>    PRIMARY KEY (`id`),<br>    KEY(`hr`),<br>    CONSTRAINT `menu_self_p` FOREIGN KEY (`pi`) REFERENCES sy_menu(`id`) ON UPDATE CASCADE ON DELETE CASCADE<br>)ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT 'menus';<br><br>-- 自定义的小函数，用来获取某个id是否具有孩子节点。<br>DELIMITER ;;<br>CREATE FUNCTION `isMenuHasChild`( inid INT ) RETURNS int(11)<br>    RETURN ( SELECT count(`id`) FROM `sy_menu` WHERE `pi`=inid );;<br>DELIMITER ;</pre>
       <hr>最后。这个组件很容易被扩展。。。 
      </div> 
     </div> 
     <div class="layui-card fly-extend-doc"> 
      <div class="layui-card-header"> 
       <h3 class="layui-inline layui-this">下载</h3> 
      </div> 
      <div class="layui-card-body detail-body layui-text"> 
       <div class="layui-btn-container"> <a href="//cdn.layui.com/extend/51608424_1578647065120_24829.rar" target="_blank" class="layui-btn layui-btn-lg layui-btn-primary"> 立即下载 </a> 
        <blockquote class="layui-elem-quote">
          该扩展组件由第三方用户主动投递，并由其自身进行维护，本站仅做收集。 
        </blockquote> 
       </div> 
      </div> 
     </div> 
    </div> 
   </div>
  </div>
  <div class="fly-footer"> 
   <p>Copyright © 2021 <a href="/index.html">layui.itmtr.cn</a> MIT Licensed</p>
  </div>
  <script src="/layui/dist/layui.js"></script>
  <script>// common</script>

 </body>
<script src="/common/common.js"></script>
</html>